<!--  -->
<template>
  <div class="">
    <a-card class="table-wrapper">
      <a-table
          :loading="tableLoading"
          :columns="columns"
          :pagination="pagination"
          @change="(e) => handle(e)"
          :data-source="tableData"
          :scroll="{ y: tableHeight }"
      >
        <span slot="action" slot-scope="text, record">
          <a type="default" @click="onChangeStatus(record)">{{record.status !== '1' ? '启用' : '停用'}}</a>
        </span>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import {PayConfigList, PayConfigUpdate} from '@/api/short'
const columns = [
  {
    title: 'ID',
    dataIndex: 'id'
  },
  {
    title: '支付平台',
    dataIndex: 'payName'
  },
  {
    title: 'Service',
    dataIndex: 'payServiceName'
  },
  {
    title: '支付状态',
    dataIndex: 'status',
    customRender: (text) => (text === '1' ? '启用' : '停用')
  },
  {
    title: '操作',
    fixed: 'right',
    scopedSlots: { customRender: 'action' },
    dataIndex: 'action',
    width: 120
  }

]
export default {
  data() {
    return {
      visible: false,
      pagination: {
        current: 1,
        'show-size-changer': true,
        total: 0
      },
      tableData: [],
      tableLoading: false,
      advanced: false,
      queryParam: {
        pageSize: 10,
        pageNum: 1
      },
      tabbarHeight: 420,
      columns,
      selectedRowKeys: [],
      selectedRows: [],
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
    tableHeight() {
      return document.body.clientHeight - 220
    }
  },
  watch: {
    checkedKeys(val) {
      console.log('onCheck', val)
    }
  },
  activated() {
    this.loadData()
  },
  mounted() {
    this.loadData()
  },
  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    onChangeStatus(record, value) {
      const vm = this
      let idList = []
      if (record.id) {
        idList = [record.id]
      } else {
        idList = this.selectedRows.map((v) => v.id)
      }
      console.log(record, value, idList, 'record, value')
      this.$confirm({
        title: record.status === '1' ? '停用支付配置' : '启用支付配置',
        content: (
            <div>
              {record.status === '1' ? (
                  <p>
                    <span style="color:#FF4E4E">支付配置停用后，将无法使用</span>，你还要继续吗？
                  </p>
              ) : (
                  <p>确认启动改支付配置？</p>
              )}
            </div>
        ),
        class: 'confirm-box',
        onOk() {
          return new Promise((resolve, reject) => {
            PayConfigUpdate(record.id, {
              status: record.status === '1'?'0':'1'
            })
                .then(() => {
                  vm.$notification['success']({
                    message: '成功提示',
                    description: record.status === '1' ? '停用支付配置成功' : '启用支付配置成功'
                  })
                  vm.loadData()
                  vm.selectedRowKeys = []
                  vm.selectedRows = []
                  resolve()
                })
                .catch(() => {
                  return reject(new Error(''))
                })
          })
        }
      })
    },
    loadData() {
      this.tableLoading = true
      PayConfigList({ ...this.queryParam })
          .then((res) => {
            this.tableLoading = false
            this.tableData = res.data.records
            this.pagination.total = res.data.total
          })
          .catch(() => {
            this.tableLoading = false
          })
    },
    handle(v) {
      if (v && v.current) {
        if (this.queryParam.pageSize == v.pageSize) {
          this.pagination.current = v.current
          this.queryParam.pageNum = v.current
        } else {
          this.queryParam.pageSize = v.pageSize
          this.queryParam.pageNum = 1
          this.pagination.current = 1
        }
      } else {
        this.queryParam.pageNum = 1
        this.pagination.current = 1
        this.queryParam.pageSize = 10
      }
      this.loadData()
    },
  }
}
</script>

<style lang="less" scoped></style>
